<template>
    <div class="box">
        <header class="header">
            <div class="address">
                <div><span>常点</span> | <span class="on">推荐</span></div>
                <van-text-ellipsis class="address-text" content="天津市东丽区西八道致馨公寓" />
            </div>
            <div class="search" style="margin-top: 10px;">
                <van-search style="padding: 0 !important;" v-model="keyword" placeholder="请输入您想吃的">
                    <template #left-icon><van-icon name="scan" style="color: #0af; font-size: 20px" /></template>
                    <template #right-icon>
                        <van-button round color="#0af">搜索</van-button>
                    </template>
                </van-search>
            </div>
        </header>
        <!-- 首页主体 -->
        <main class="main">
            <!-- 轮播图 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in swiperArr">
                    <img :src="item.imgUrl" :alt="item.imgAlt">
                </van-swipe-item>
            </van-swipe>
            <!-- 快捷菜单 -->
            <van-grid>
                <van-grid-item v-for="item in menuArr" :key="item.id">
                    <template #icon>
                        <img :src="item.imgUrl" width="50" height="50" />
                    </template>
                    <template #text>{{ item.menuTitle }}</template>
                </van-grid-item>
            </van-grid>
            <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                店铺推荐
            </van-divider>
            <!-- 店铺推荐 -->
            <div class="shop-list">
                <div class="shop-item" v-for="item in shopList" :key="item.businessId">
                    <img :src="item.businessImg" alt="" />
                    <p class="shop-item-name">{{ item.businessName }}</p>
                    <div class="shop-item-price">
                        配送费：{{ item.deliveryPrice }} 起送费：{{ item.startPrice }}
                    </div>
                    <van-button type="success" @click="goShop(item.businessId, item.businessName)">开始点餐</van-button>
                </div>
                <van-button type="success" block plain @click="$router.push('/shopList')">查看更多推荐店铺</van-button>
            </div>
            <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                菜品推荐
            </van-divider>
            <!-- 菜品推荐 -->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
            </van-list>
        </main>
        <!-- 首页尾部 -->
        <footer class="footer">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
                <van-tabbar-item icon="cart-circle">超市</van-tabbar-item>
                <van-tabbar-item icon="comment-o">信息</van-tabbar-item>
                <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
                <van-tabbar-item icon="user-o">我的</van-tabbar-item>
            </van-tabbar>
        </footer>
    </div>
</template>

<script>
import { getSwiperAPI, getMenuListAPI, getRecommendShopAPI } from "@/api/home";
export default {
    data() {
        return {
            keyword: "",
            active: 0,
            text: "天津市东丽区西八道致馨公寓",
            // 控制列表的加载
            loading: false,
            // 表示列表的数据是否加载完成
            finished: false,
            // 列表需要展示的内容
            shopList: [],
            // 轮播图数组
            swiperArr: [],
            // 菜单数组
            menuArr: []
        }
    },
    methods: {
        // 当列表触底的时候，触发的加载动作
        onLoad() { },
        // 点击开始点餐
        goShop(businessId, businessName) {
            this.$router.push({
                path: "/shop",
                query: {
                    businessId,
                    businessName
                }
            })
        },
        // 加载轮播图数据
        loadSwiper() {
            getSwiperAPI().then((resp) => {
                if (resp.data.code === 20000) {
                    this.swiperArr = resp.data.datas;
                }
            })
        },
        // 加载菜单
        loadMenu() {
            getMenuListAPI().then((resp) => {
                if (resp.data.code == 20000) {
                    this.menuArr = resp.data.datas;
                }
            })
        },
        // 加载推荐的店铺
        loadRecommendShop() {
            getRecommendShopAPI().then((resp) => {
                if (resp.data.code == 20000) {
                    this.shopList = resp.data.datas;
                }
            })
        }
    },
    created() {
        // 加载轮播图
        this.loadSwiper();
        // 加载快捷菜单
        this.loadMenu();
        // 加载推荐店铺
        this.loadRecommendShop();
    }
};
</script>

<style lang="less" scoped>
.box {
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    height: 100%;

    // 页面顶部样式
    .header {
        height: 90px;

        // 顶部地址样式
        .address {
            margin-top: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999;
            font-size: 18px;

            .on {
                color: #000;
            }

            .address-text {
                text-align: right;
                flex: 1;
                color: #444;
                font-size: 16px;
            }
        }

        // 顶部搜索区域样式
        .search {
            height: 35px;

            :deep(.van-search__content) {
                height: 100%;
                border-radius: 50px;
                border: 2px solid #05aff5;
            }

            :deep(.van-search__field) {
                height: 100%;
            }

            .van-button {
                height: 100%;
                background-color: #05aff5;
                color: #fff;
                font-size: 12px;
                padding: 4px 16px;
                margin: 4px 4px;
            }
        }
    }

    // 页面主体样式
    .main {
        flex: 1;
        overflow-y: auto;

        // 轮播图样式
        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            background-color: #39a9ed;

            // 轮播图中的图片样式
            img {
                width: 100%;
                height: 220px;
            }
        }

        // 店铺推荐样式
        .shop-list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .shop-item {
                display: flex;
                flex-direction: column;
                width: calc(50% - 5px);
                text-align: center;
                margin-bottom: 10px;

                .shop-item-name {
                    margin-top: 5px;
                    font-weight: bold;
                    color: #0078d4;
                }

                img {
                    width: 100%;
                }

                .shop-item-price {
                    color: #999;
                    font-size: 12px;
                    margin: 5px 0;
                }
            }
        }
    }

    // 页面底部样式
    .footer {
        height: 50px;
    }
}
</style>